<template>
  <div class="home">
    <div class="header-box">
      <PageHeader />
    </div>
    <div class="body">
      <div class="search-box">
        <Search />
      </div>
      <div class="main-box">
        <div class="step-box">
          <div class="step-item" v-for="(item, index) in titleArr" :key="index">
            <div @click="selectItem(index)">
              <i
                :class="
                  active === index
                    ? 'iconfont icon-yuanquanxuanzhong'
                    : 'iconfont icon-yuanquan'
                "
              ></i>
            </div>
            <div class="title" @click="selectItem(index)">
              {{ item.stageName }}
            </div>
            <div class="icon" v-if="index != 6">
              <i class="iconfont icon-jiantou_yemian_xiangyou"></i>
            </div>
            <div class="icon" v-else>
              <i
                class="iconfont icon-24gf-ellipsis"
                @click="getAllProjectData"
              ></i>
            </div>
          </div>
        </div>
        <div class="project-box" v-if="showProData.length">
          <div
            class="project-item"
            v-for="(item, index) in showProData"
            :key="index"
          >
            <div class="id-box">
              {{ item.procode }}
            </div>
            <div class="project-title">
              {{ item.proshortname }}
            </div>
            <!-- <div class="content-box">
              {{ item.proname }}
            </div> -->
            <div class="btn-box">
              <div @click="open(item, 1)">项目基本信息</div>
              <div @click="open(item, 2)">项目合同信息</div>
              <div @click="open(item, 3)">项目成员</div>
              <div @click="open(item, 4)">里程碑</div>
            </div>
          </div>
        </div>
        <div class="empty-box" v-else>暂无数据</div>
      </div>
    </div>
    <Dialog
      ref="dialogRefs"
      :dialogType="dialogType"
      :selectProCode="selectProCode"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import PageHeader from "@/components/PageHeader.vue";
import Search from "./ui/Search.vue";
import Steps from "./ui/Steps.vue";
import StepItem from "@/components/StepItem.vue";
import Dialog from "./ui/Dialog.vue";
import { getProjectListApi, getStageProjectListApi } from "@/api/index";

export default {
  name: "HomeView",
  components: {
    PageHeader,
    Search,
    Steps,
    StepItem,
    Dialog,
  },
  data() {
    return {
      // 控制状态点高亮
      active: null,
      // 状态数组
      titleArr: [
        {
          proStage: "SalesResearch",
          stageName: "售前调研",
        },
        {
          proStage: "Develop",
          stageName: "研发阶段",
        },
        {
          proStage: "ElectricImplement",
          stageName: "电气实施",
        },
        {
          proStage: "Design",
          stageName: "产品设计",
        },
        {
          proStage: "DebugTogether",
          stageName: "联调阶段",
        },
        {
          proStage: "Waiting4Sign",
          stageName: "等待验收",
        },
        {
          proStage: "Finish",
          stageName: "已完成",
        },
      ],
      // 展示的项目源数据
      showProData: [],
      // 控制弹框
      dialogType: null,
      // 选择项的code
      selectProCode: null,
    };
  },
  methods: {
    // 获取全部项目数据
    async getAllProjectData() {
      this.active = null;
      // let res = await getProjectListApi();
      let res = await getStageProjectListApi();
      console.log("首次返回值----->", res);
      this.showProData = res;
      // for (let i = 0; i < 7; i++) {
      //   this.showProData.push(...this.testRes[i]);
      // }
    },
    // 阶段选择事件
    async selectItem(id) {
      this.active = id;
      let data = {
        key: this.titleArr[id].proStage,
      };
      let res = await getStageProjectListApi(data);
      this.showProData = res;
      console.log("阶段的项目---->", data, res);
    },
    // 弹框打开事件
    async open(row, num) {
      this.selectProCode = row.procode;
      this.dialogType = num;
      this.$refs.dialogRefs.dialogVisible = true;
      console.log("点击项---》", this.dialogType);
      this.$refs.dialogRefs.getShowData(this.dialogType, this.selectProCode);
    },
  },
  async mounted() {
    // this.active = 0;
    this.getAllProjectData();
  },
};
</script>
<style scoped lang="scss">
.home {
  /* border: 1px solid blue; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f3f6ff;

  .header-box {
    width: 100%;
    height: 20%;
  }
  .body {
    /* border: 1px solid red; */
    height: calc(100% - 20%);
    padding-left: 15%;
    flex: 1;
    background: #f3f6ff;

    .search-box {
      /* border: 1px solid red; */
      width: 83%;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      > span:hover {
        cursor: pointer;
      }
    }

    .step-box {
      width: 85%;
      margin-top: 10px;
      /* border: 1px solid red; */
      display: flex;

      .step-item {
        width: 160px;
        height: 35px;
        line-height: 200%;
        display: flex;
        background: #f3f6ff;

        .title {
          width: 70px;
          margin-right: 20px;
          color: black;
        }

        .icon {
          width: 30px;
        }
      }

      .step-item:hover {
        cursor: pointer;
      }
    }

    .project-box {
      /* border: 1px solid red; */
      width: 85%;
      height: 500px;
      display: flex;
      /* justify-content: space-between; */
      align-content: stretch;
      flex-wrap: wrap;
      background: #f3f6ff;
      overflow: auto;

      .project-item {
        /* border: 1px solid blue; */
        height: 46%;
        width: 23%;
        margin: 5px 10px;
        text-align: center;
        /* background: linear-gradient(#9ccaeb, #cfd5e7); */
        /* background: linear-gradient(45deg, #fff, #cfd5e7, #46a9f0); */
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 5px 5px #d7e7f1;
        > div {
          margin-top: 3px;
        }

        .id-box {
          /* border: 1px solid red; */
          /* color: #b6aeae; */
          margin-bottom: 10px;
          padding-top: 10px;
          padding-left: 10px;
          width: 100%;
          text-align: start;
          font-size: 20px;
          font-family: "楷体";
        }

        .project-title {
          /* border: 1px solid red; */
          /* font-family: "楷体"; */
          width: 94%;
          margin-top: 20px;
          margin-bottom: 12px;
          height: 87px;
          padding: 0 5px;
          font-size: 22px;
          /* text-align: start; */
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
        }

        .content-box {
          /* border: 1px solid red; */
          height: 50px;
          padding: 0 5px;
          padding-top: 2px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .btn-box {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          font-family: "楷体";

          > div {
            width: 45%;
            height: 22px;
            line-height: 22px;
            margin: 2px 2px;
            border: 1px solid #a1a5b1;
            border-radius: 4px;
            font-size: 12px;
          }

          > div:hover {
            cursor: pointer;
            background: #bbd7eb;
          }

          > div:active {
            background: rgba($color: #87c1eb, $alpha: 0.5);
          }
        }

        .el-button {
          width: 45%;
          margin: 1px 0;
        }
      }
    }

    .project-box::-webkit-scrollbar {
      width: 4px;
    }
    .project-box::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.2);
    }
    .project-box::-webkit-scrollbar-track {
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }

    .empty-box {
      width: 85%;
      height: 500px;
      text-align: center;
      line-height: 500px;
    }

    /* .project-box {
      border: 1px solid green;
      width: 100px;
      height: 100px;
    } */
  }
}
</style>
